<template>
    <div class="home">
        <Header :check="1" />
        <Banner :imgUrl="urls" />
        <div class="about-page">
            <div class="title-page">
                <img class="img" src="@/assets/images/title_facebook.png" alt="">
            </div>
            <div class="container">
                <div class="facebook-main">
                    <div class="facebook-cont">
                        <el-form class="facebook-form" :model="form" :rules="rules" ref="facebookRef"
                            label-width="120px" style="max-width: 600px">
                            <el-form-item label="联系人：" prop="relationName">
                                <el-input v-model="form.relationName" size="large" />
                            </el-form-item>
                            <el-form-item label="联系电话：" prop="phone">
                                <el-input v-model="form.phone" type="tel" size="large" />
                            </el-form-item>
                            <el-form-item label="开展业务类型：" prop="type">
                                <el-select v-model="form.type" size="large" placeholder="选择业务类型">
                                    <el-option label="房抵" value="1" />
                                    <el-option label="赎楼" value="2" />
									<el-option label="企业过桥" value="3" />
									<el-option label="专项垫资" value="4" />
									<el-option label="居间服务" value="5" />
									<el-option label="工商需求" value="6" />
                                </el-select>
                            </el-form-item>
							<el-form-item label="借款金额(元)：" prop="amount">
							    <el-input-number v-model="form.amount" min="0" controls-position="right" size="large" />
							</el-form-item>
                            <el-form-item label="地址：" prop="address">
                                <el-input v-model="form.address" size="large" />
                            </el-form-item>




                            <div class="btn-box">
                                <el-button class="btn" type="primary" @click="submitForm">提交</el-button>
                            </div>

                        </el-form>
                    </div>
                </div>
            </div>
        </div>
        <Footer />
		
		<!-- 对话框 -->
		<el-dialog :title="title" v-model="open" width="500px" append-to-body>
		  <el-form ref="idcRef" :model="idcForm" :rules="idcRules"  label-width="120px">
		    <el-form-item label="姓名" prop="idcName">
		      <el-input v-model="idcForm.idcName" placeholder="姓名" />
		    </el-form-item>
			<el-form-item label="身份证号码" prop="idcNo">
			  <el-input v-model="idcForm.idcNo" placeholder="身份证号码"/>
			</el-form-item>
		   
		  </el-form>
		  <template #footer>
		    <div class="dialog-footer">
		      <el-button type="primary" @click="idcSubmitForm">确 定</el-button>
		    </div>
		  </template>
		</el-dialog>
		
    </div>
</template>

<script setup>
import { ElMessage, ElLoading } from 'element-plus'
const { proxy } = getCurrentInstance();
import {save} from "@/api/user/facebook";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import Banner from "@/components/Banner.vue";

import urls from '@/assets/images/bg_pic.jpg';


const title = ref("");
const open = ref(false);
const data = reactive({
	idcForm: {
        idcName: '',
        idcNo: '',
    },
	idcRules: {
	    idcName: [
	        { required: true, message: "名称不能为空", trigger: "blur" }
	    ],
	    idcNo: [
	         { required: true, message: "身份证不能为空", trigger: "blur" }
	    ],
	},
    form: {
        relationName: '',
        phone: '',
        type: '',
        address: '',
		amount: 0,
    },
    rules: {
        relationName: [
            { required: true, message: "联系人不能为空", trigger: "blur" }
        ],
        phone: [
            { required: true, message: "联系电话不能为空", trigger: "blur" },
            { pattern: /^1[3456789]\d{9}$/, message: '联系电话格式不正确', trigger: 'blur' }
        ],
        type: [
            { required: true, message: "开展业务类型不能为空", trigger: "blur" }
        ],
        address: [
            { required: true, message: "地址不能为空", trigger: "blur" }
        ],
		amount: [
            { required: true, message: "借款金额不能为空", trigger: "blur" }
        ],
    }
});

const { form, rules,idcForm,idcRules } = toRefs(data);


// 表单重置
function reset() {
    form.value = {
        relationName: '',
        phone: '',
        type: '',
        address: '',
		amount: 0,
    }
	idcForm.value = {
	    idcName: '',
	    idcNo: '',
	}
}

// 提交保存
function submitForm() {

    proxy.$refs["facebookRef"].validate(valid => {
        if (valid) {
			open.value = true;
			title.value = "身份认证信息";
			// save(form.value).then(response => {
			//   proxy.$modal.msgSuccess("提交成功");
			 
			// });

   //          reset()

        }
    });
}

function idcSubmitForm() {

    proxy.$refs["idcRef"].validate(valid => {
        if (valid) {
			
			save(form.value).then(response => {
				open.value = false;
				title.value = "";
			  proxy.$modal.msgSuccess("资料已提交，等待审核通知");
			 
			});
            reset()

        }
    });
}


</script>


<style scoped lang="scss">
	
	
.facebook-main {
    width: 100%;
    margin-top: 1.4rem;

    .facebook-cont {
        max-width: 500px;
        margin: 0 auto;

        .el-select {
            width: 100% !important;
        }

    }

    .btn-box {
        width: 100%;
        margin-top: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;

        .btn {
            width: 320px;
            height: 52px;
            line-height: 52px;
            background: #FF6201;
            border-radius: 2px 2px 2px 2px;
            color: #FFFFFF;
            font-size: var(--fz20);
        }
    }
}


</style>